<template>
  <div class="monitor-page">
    <el-tabs v-model="activeName" style="height:100%;padding: 15px;">
      <el-tab-pane label="任务管理" name="taskmanage">
        <el-form :model="taskForm" label-width="80px" class="el-row">
          <el-form-item label="任务名称 :" class="el-col el-col-7">
            <el-input v-model="taskForm.aa"></el-input>
          </el-form-item>
          <el-form-item label="指标名称 :" class="el-col el-col-7 el-col-offset-1">
            <el-input v-model="taskForm.aa"></el-input>
          </el-form-item>
          <el-form-item label="监测周期 :" class="el-col el-col-7 el-col-offset-1">
            <el-input v-model="taskForm.aa"></el-input>
          </el-form-item>
          <el-form-item label="更新方式 :" class="el-col el-col-7">
            <el-select v-model="value" placeholder="请选择" style="width:100%">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="执行状态 :" class="el-col el-col-7 el-col-offset-1">
            <el-select v-model="value" placeholder="请选择" style="width:100%">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item class="el-col el-col-8" style="text-align:right">
            <el-button type="primary" @click="getTableData">查询</el-button>
            <el-button @click="reset">重置</el-button>
          </el-form-item>
        </el-form>
        <div style="margin:15px 0 ">
          <el-button @click="newItem">新建</el-button>
          <el-button>停止</el-button>
          <el-button>暂停</el-button>
          <el-button>删除</el-button>
          <el-button>开始</el-button>
          <el-button>重做</el-button>
        </div>
        <el-table :data="tableData">
          <el-table-column prop="date" label="任务名称"></el-table-column>
          <el-table-column prop="name" label="指标名称"></el-table-column>
          <el-table-column prop="address" label="监测周期"></el-table-column>
          <el-table-column prop="date" label="更新方式"></el-table-column>
          <el-table-column prop="name" label="规划周期"></el-table-column>
          <el-table-column prop="name" label="执行状态"></el-table-column>
          <el-table-column prop="name" label="是否监控配置"></el-table-column>
          <el-table-column prop="name" label="创建时间"></el-table-column>
          <el-table-column label="操作" align="center" width="120">
            <template slot-scope="scope">
              <i class="el-icon-edit"></i>
              <i class="el-icon-delete" style="margin-left:10px"></i>
              <i class="el-icon-delete" style="margin-left:10px"></i>
              <i class="el-icon-delete" style="margin-left:10px"></i>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="监控配置" name="monitor">
        <div>
          <span>规划周期：</span>
          <el-date-picker style="margin-left:10px" v-model="value2" type="monthrange" align="right" unlink-panels range-separator="至" start-placeholder="开始月份" end-placeholder="结束月份" :picker-options="pickerOptions"></el-date-picker>
          <el-button style="margin-left:10px">搜索</el-button>
        </div>
        <div style="margin:10px 0 ">
          <el-button @click="newConfig">新建</el-button>
          <el-button>删除</el-button>
        </div>
        <el-table :data="tableData">
          <el-table-column prop="date" label="任务名称"></el-table-column>
          <el-table-column prop="name" label="规划周期"></el-table-column>
          <el-table-column prop="date" label="指标属性"></el-table-column>
          <el-table-column prop="name" label="突破类型"></el-table-column>
          <el-table-column prop="name" label="关联指标任务"></el-table-column>
          <el-table-column label="操作" align="center" width="80">
            <template slot-scope="scope">
              <i class="el-icon-edit"></i>
              <i class="el-icon-delete" style="margin-left:10px"></i>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  data () {
    return {
      activeName: 'taskmanage',
      taskForm: {
        aa: '',
      },
      options: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }, {
        value: '选项3',
        label: '蚵仔煎'
      }, {
        value: '选项4',
        label: '龙须面'
      }, {
        value: '选项5',
        label: '北京烤鸭'
      }],
      value: '',
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }],
      value2: '',
      pickerOptions: {
        shortcuts: [{
          text: '本月',
          onClick (picker) {
            picker.$emit('pick', [new Date(), new Date()]);
          }
        }, {
          text: '今年至今',
          onClick (picker) {
            const end = new Date();
            const start = new Date(new Date().getFullYear(), 0);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近六个月',
          onClick (picker) {
            const end = new Date();
            const start = new Date();
            start.setMonth(start.getMonth() - 6);
            picker.$emit('pick', [start, end]);
          }
        }]
      }
    };
  },
  methods: {
    async getTableData () {
      let res = await this.$get('indexmodelapply/model/getModelList')
    },
    reset () {

    },
    newItem () {
      this.$router.push('监控配置/新建指标任务')
    },
    newConfig () {
      this.$router.push('监控配置/指标配置')
    }

  },
  created () {
    this.getTableData()
  }
}
</script>

<style lang="less">
.monitor-page {
  height: 100%;
  width: 100%;
  background-color: #fff;
}
</style>